<template>
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">活动详情</view>
		</cu-custom>
		<view class="cu-bar bg-white">
			<view class="action">
				<text class="cuIcon-titles text-green"></text>
				<text class="text-xl text-bold">{{activityInfo.title}}</text>
			</view>
		</view>
		<swiper class="card-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="3000"
			duration="500" @change="cardSwiper" indicator-color="#8799a3" indicator-active-color="#39b54a">
			<swiper-item v-for="(item, index) in activityInfo.imgList" :key="index" :class="cardCur==index?'cur':''"
				style="padding-top: 0;">
				<view class="swiper-item">
					<image :src="url + '/image/' + item" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==tabCur?'text-green cur':''"
					v-for="(item, index) in tabList" :key="index" @click="tabSelect(index)">
					{{item}}
				</view>
			</view>
		</scroll-view>
		<scroll-view v-if="tabCur == 0" scroll-y @scrolltolower="commentLoad"
			:style="'height: calc(100vh - 710rpx +  env(safe-area-inset-bottom) / 2 - ' + CustomBar + 'px)'">
			<view class="cu-bar bg-white">
				<view class="action">
					<text class="cuIcon-title text-green"></text>
					<text class="text-bold">活动简介</text>
				</view>
			</view>
			<view class="padding-lr">
				{{activityInfo.content}}
			</view>
			<view class="cu-bar bg-white">
				<view class="action">
					<text class="cuIcon-title text-green"></text>
					<text class="text-bold">活动评论</text>
				</view>
			</view>
			<view v-for="(item, index) in commentList" :key="item.id"
				class="padding-lr flex justify-start margin-bottom padding-bottom"
				style="border-bottom: 2upx solid lightgray;">
				<view class="flex justify-center flex-sub">
					<view class="cu-avatar round lg"
						:style="'background-image:url(' + url + '/image/' + item.avatar + ')'"></view>
				</view>
				<view style="flex: 3; min-height: 96upx;" class="">
					<view class="flex justify-between comment-head margin-bottom">
						<view>{{item.nickname}}</view>
						<view class="text-gray">{{item.time}}</view>
					</view>
					<view class="comment-content">{{item.content}}</view>
				</view>
			</view>
			<view class="cu-bar bg-white justify-center"
				style="padding-bottom: 140upx + env(safe-area-inset-bottom) / 2);">
				<view class="action">
					<text class="cuIcon-pullup text-green"></text>
					<text>没有更多了哦</text>
				</view>
			</view>
			<view class="cu-bar foot input" :class="inputBottom!=0?'cur':''" :style="'bottom: ' + inputBottom + 'px'">
				<view class="action">
					<text class="text-grey">评论:</text>
				</view>
				<input class="solid-bottom" @focus="inputFocus" @blur="inputBlur" :adjust-position="false"
					:focus="false" maxlength="300" cursor-spacing="10" @input="inputComment"></input>
				<view class="action">
					<text class="cuIcon-emojifill text-grey"></text>
					<text
						:class="'cuIcon-' + (fill ? 'appreciatefill ' : 'appreciate ') + (fill ? 'text-red' : 'text-grey')"
						@click="appreciate"></text>
				</view>
				<button class="cu-btn bg-green shadow" @click="sendComment">发送</button>
			</view>
		</scroll-view>
		<scroll-view v-else scroll-y
			:style="'height: calc(100vh - 710rpx +  env(safe-area-inset-bottom) / 2 - ' + CustomBar + 'px)'">
			<view class="flex justify-start">
				<view class="cu-bar bg-white">
					<view class="action">
						<text class="cuIcon-title text-green"></text>
						<text class="text-bold">活动时间:</text>
					</view>
				</view>
				<view class="padding-lr flex align-center">
					{{activityInfo.time}}
				</view>
			</view>
			<view class="flex justify-start">
				<view class="cu-bar bg-white">
					<view class="action">
						<text class="cuIcon-title text-green"></text>
						<text class="text-bold">活动地点:</text>
					</view>
				</view>
				<view class="padding-lr flex align-center">
					{{activityInfo.place.name}}<text class="text-green" @click.stop="toActivityMap">(点击在大地图中查看)</text>
				</view>
			</view>
			<view class="flex justify-start">
				<view class="cu-bar bg-white">
					<view class="action">
						<text class="cuIcon-title text-green"></text>
						<text class="text-bold">活动分类:</text>
					</view>
				</view>
				<view class="padding-lr flex align-center">
					{{activityInfo.category}}
				</view>
			</view>
			<view class="flex justify-start">
				<view class="cu-bar bg-white">
					<view class="action">
						<text class="cuIcon-title text-green"></text>
						<text class="text-bold">参加人数:</text>
					</view>
				</view>
				<view class="padding-lr flex align-center">
					{{activityInfo.participation}} / {{activityInfo.numOfPerson}}
				</view>
			</view>
			<view class="flex justify-start">
				<view class="cu-bar bg-white">
					<view class="action">
						<text class="cuIcon-title text-green"></text>
						<text class="text-bold">活动日程:</text>
					</view>
				</view>
				<view class="padding-lr flex align-center" :class="fold?'cuIcon-right':'cuIcon-unfold'" @click="unFold">
				</view>
			</view>
			<view class="cu-timeline">
				<view class="cu-item" v-if="!fold" v-for="(item, index) in schedule" :key="item.time">
					<view class="content">
						<view class="cu-capsule radius">
							<view class="cu-tag bg-cyan">{{timeRange(item.time)}}</view>
							<view class="cu-tag line-cyan">{{item.time}}</view>
						</view>
						<view class="margin-top">
							<view>{{item.content}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-bar bg-white tabbar border shop foot">
				<button class="action" open-type="contact">
					<view class="cuIcon-service text-green">
						<view class="cu-tag badge"></view>
					</view>
					客服
				</button>
				<view class="action text-orange" @click="star">
					<view v-if="activityInfo.star">
						<view class="cuIcon-favorfill"></view> 已收藏
					</view>
					<view v-else>
						<view class="cuIcon-favor"></view> 收藏
					</view>
				</view>
				<view class="bg-green submit" @click="participate">我要参加</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	// import axios from 'axios';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				url: this.url,
				inputBottom: 0,
				comment: '',
				commentList: [
					// 	{
					// 	_id: '01',
					// 	nickname: '橙猫猫',
					// 	avatar: 'https://ts1.cn.mm.bing.net/th/id/R-C.34dbe5eeffe1f5f7e6a68bd6b8eab6ca?rik=LbeeklEm3xSJIg&riu=http%3a%2f%2fimg2.woyaogexing.com%2f2017%2f06%2f09%2f442dc06c59103444!400x400_big.jpg&ehk=xkb6hVvCOgj0BVN7uUFNG6KCLTnuuer%2b3sMM3TRgJZk%3d&risl=&pid=ImgRaw&r=0',
					// 	time: '9月28日12点56分',
					// 	content: '好耶, 期待活动'
					// }, {
					// 	_id: '02',
					// 	nickname: '淡狗狗',
					// 	avatar: 'https://tupian.qqw21.com/article/UploadPic/2012-8/201287221234868.jpg',
					// 	time: '9月16日13点45分',
					// 	content: '不关橙猫猫的事哦不关橙猫猫的事哦不关橙猫猫的事哦不关橙猫猫的事哦不关橙猫猫的事哦不关橙猫猫的事哦不关橙猫猫的事哦不关橙猫猫的事哦不关橙猫猫的事哦不关橙猫猫的事哦不关橙猫猫的事哦不关橙猫猫的事哦不关橙猫猫的事哦不关橙猫猫的事哦不关橙猫猫的事哦'
					// },
				],
				activityInfo: {
					// id: '01',
					// title: '金秋艺术节',
					// content: '一年一度的金秋艺术节等你来参加, 名额有限, 速来报名!',
					// time: '9月18日上午9点',
					// place: {
					// 	name: '梅园操场',
					// 	address: '',
					// 	latitude: 30.535360857133234,
					// 	longitude: 114.36296577358243
					// },
					// category: '文体活动',
					// participation: 30,
					// numOfPerson: 60,
					// star: false,
					// imgList: [
					// 	// 'https://tse3-mm.cn.bing.net/th/id/OIP-C.nRlAFygdctTCHmIWN7GxRwHaEK?pid=ImgDet&rs=1',
					// 	// 'https://ts1.cn.mm.bing.net/th/id/R-C.e09c9ac88d6a159bcdafbb98b96c451d?rik=SAD5AFJYGB6qRg&riu=http%3a%2f%2fwww.2qqtouxiang.com%2fpic%2fTP4545_04.jpg&ehk=RSDt%2foDClYGXoARgxoyuakHTbDGuWLlxiMeKoGOVQKs%3d&risl=&pid=ImgRaw&r=0',
					// 	// 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g4/M07/06/05/Cg-4y1TcgwGIcCW6ADOtF-oxuF8AAUn6wNDA_AAM60v722.jpg',
					// ]
				},
				cardCur: 0,
				tabCur: 0,
				tabList: ['活动介绍', '参与活动'],
				fold: true,
				schedule: ''
			}
		},
		computed: {
			...mapState(['userInfo']),
			login() {
				return this.userInfo.userName != ''
			},
			numOfComments() {
				return this.commentList.length
			}
		},
		methods: {
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			tabSelect(index) {
				this.tabCur = index;
			},
			inputFocus(e) {
				this.inputBottom = e.detail.height
			},
			inputBlur(e) {
				this.inputBottom = 0
			},
			inputComment(event) {
				this.comment = event.detail.value
			},
			commentLoad() {
				// if (this.login) {
				// 	uni.request({
				// 		method: 'GET',
				// 		url: '',
				// 		success: (res) => {
				// 			this.commentList = this.commentList.concat(res.data)
				// 		}
				// 	})
				// } else {
				// 	uni.navigateTo({
				// 		url: '/pages/login/login'
				// 	})
				// }
			},
			sendComment() {
				if (this.login) {
					uni.request({
						method: 'POST',
						url: this.url + '/comment',
						data: {
							avatar: this.userInfo.avatar,
							nickname: this.userInfo.nickname,
							time: new Date().getTime(),
							content: this.comment,
							actId: this.activityInfo.id,
							userId: this.userInfo.userId
						},
						success: (res) => {
							const date = new Date()
							if (res.statusCode == 200) {
								this.commentList.unshift({
									avatar: this.userInfo.avatar,
									nickname: this.userInfo.nickname,
									time: date.getFullYear() + '-' + date.getMonth() + '-' + date
										.getDay(),
									content: this.comment
								})
							}
						},
						fail: (err) => {
							console.log('请求失败', err)
						}
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			participate() {
				if (this.login) {
					uni.showModal({
						title: '确定参加此活动吗',
						success: (res) => {
							if (res.confirm) {
								uni.request({
									method: 'POST',
									url: this.url + '/activity/' + this.userInfo.userId,
									header: {
										Authorization: 'Bearer ' + this.userInfo.token,
										'content-type': 'application/x-www-form-urlencoded'
									},
									data: {
										actId: this.activityInfo.id,
									},
									success: (res) => {
										console.log(res)
										if (res.statusCode == 200) {
											uni.showToast({
												title: '参加活动成功!',
												icon: 'none',
												duration: 1500
											})
										}
									}
								})
							}
						}
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			toActivityMap() {
				uni.navigateTo({
					url: '/pages/activityMap/activityMap?latitude=' + this.activityInfo.place.latitude +
						'&longitude=' + this.activityInfo.place.longitude
				})
			},
			unFold() {
				this.fold = !this.fold
				if (this.schedule == '') {
					uni.request({
						method: 'GET',
						url: this.url + '/schedule',
						data: {
							activityId: this.activityInfo.id
						},
						success: (res) => {
							console.log(res)
							if (res.statusCode == 200) {
								this.schedule = res.data
							}
						}
					})
				}
			},
			timeRange(time) {
				return parseInt(time.slice(0, 2)) > 12 ? '下午' : '上午'
			},
			star() {
				if (this.activityInfo.star) {
					uni.request({
						method: 'DELETE',
						url: this.url + '/activity/' + this.userInfo.userId + '/' + this.activityInfo.id,
						// data: {
						// 	actId: this.activityInfo.id
						// },
						header: {
							Authorization: 'Bearer ' + this.userInfo.token,
							// 'content-type': 'application/x-www-form-urlencoded'
						},
						success: (res) => {
							console.log(res)
							if (res.statusCode == 200) {
								this.activityInfo.star = false
							}
						}
					})
				} else {
					uni.request({
						method: 'POST',
						url: this.url + '/activity/collect/' + this.userInfo.userId,
						data: {
							actId: this.activityInfo.id
						},
						header: {
							Authorization: 'Bearer ' + this.userInfo.token,
							'content-type': 'application/x-www-form-urlencoded'
						},
						success: (res) => {
							console.log(res)
							if (res.statusCode == 200) {
								this.activityInfo.star = true
							}
						}
					})
				}

			}
		},
		onLoad(option) {
			uni.showLoading({
				title: '加载数据中...',
			})
			uni.request({
				method: 'GET',
				url: this.url + '/home/' + option.id,
				data: {
					userId: this.userInfo.userId
					// userId: this.userInfo.userId
				},
				success: (res) => {
					// console.log(res)
					if (res.statusCode == 200) {
						this.activityInfo = res.data
					}
				},
				complete: (res) => {
					uni.hideLoading()
				}
			})
			uni.request({
				method: 'GET',
				url: this.url + '/comment/' + option.id,
				data: {
					pageNum: 1,
					pageSize: 10
				},
				success: (res) => {
					// console.log(res)
					if (res.statusCode == 200) {
						this.commentList = res.data.records
					}
				}
			})
		}
	}
</script>

<style>
	.comment-border {
		border: 4upx solid gray;
	}

	.comment-head {
		font-size: 16upx;
	}

	.comment-content {
		font-size: 28upx;
	}
</style>
